@import url("chrome://komodo/skin/global/colors.less");
@import url("resource://profile/colors.less");
@import url("chrome://komodo/skin/global/mixins.less");

#commando-panel
{
    border: 0;
    background: @contrast;
    color: @foreground;
    border: 5px solid @contrast;
    -moz-box-orient: horizontal;
    
    label,
    description
    {
        font-size: 1rem !important;
    }

    button
    {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    &.blocked
    {
        & > *
        {
            opacity: 0.4;
        }
    }

    &.previewing:not(.maximized) #commando-preview
    {
        background: @background;
        width: 600px;
        border-left: 1px solid @contrast;
    }

    &.previewing.maximized #commando-preview
    {
        width: 600px;
    }

    #commando-panel-wrapper
    {
        width: 500px;
        transition: visibility 10ms; /* Hack to prevent XUL from hiding the commando panel apparently */
    }
    
    &.previewing #commando-panel-wrapper
    {
        width: 850px;
    }

    &.previewing:not(.maximized) #commando-results-outer
    {
        width: 250px;
    }
    
    &.previewing.maximized #commando-results-outer
    {
        visibility: collapse;
    }
    
    #commando-search-wrapper
    {
        background: @textbox;
        color: @textbox-foreground;
        border-bottom: 5px solid @contrast;
        height: 32px;
        
        textbox
        {
            background-color: transparent !important;
            -moz-appearance: none;
            border: 0;
            margin: 0;
            
            .textbox-input
            {
                color: @textbox-foreground;
                font-size: 1.4rem;
            }
        }
    }
    
    textbox, menulist
    {
        box-shadow: none !important;
    }

    #commando-subscope-wrap,
    #commando-scope-filter-wrapper
    {
        visibility: collapse;
        padding: 0 0 5px 0;
        overflow: hidden;

        .icon
        {
            background-repeat: no-repeat;
            width: 16px;
            height: 16px;
            background-size: 16px;
            max-height: 16px;
        }

        .title
        {
            margin-left: 5px;
        }

        button
        {
            margin: 0 5px 0 0;
        }
    }

    #commando-subscope-wrap button.short .title
    {
        visibility: collapse;
    }
    
    #commando-scope-filter-wrapper
    {
        .count
        {
            margin-left: 5px;
            opacity: 0.6;
        }

        &.overflown .title:not(.short)
        {
            visibility: collapse;
        }

        &:not(.overflown) .title.short
        {
            visibility: collapse;
        }
    }
    
    #commando-tip 
    {
        max-width: 500px;
        margin: 4px 0 0;
        padding: 0;
        background: @contrast;
        
        &[tip-type="error"]
        {
            color: @state-error !important;
        }
    }
    
    &.previewing #commando-tip
    {
        max-width: 240px;
    }
    
    .spinner
    {
        visibility: collapse;
        opacity: 0;
        transition: 0.2s ease-in-out opacity;
        .spinner(@textbox-foreground);
        width: 24px;
    }

    &.loading .spinner
    {
        visibility: visible;
        opacity: 1;
    }
    
    menulist#commando-scope
    {
        -moz-appearance: none;
        background-color: transparent !important;
        width: 40px;
        border: 0;
        margin: 0;

        & > .menulist-label-box
        {
            .menulist-label
            {
                visibility: collapse;
            }
            
            .menulist-icon
            {
                width: 16px;
            }
        }
        
        .menulist-dropmarker
        {
            display: none;
        }
        
        menuitem .menu-iconic-left
        {
            visibility: visible;
            display: inherit;
            -moz-margin-end: 4px !important; /* Whats wrong with `margin` mozilla? */
        }
    }

    richlistbox#commando-results
    {
        -moz-appearance: none;
        background: @textbox;
        color: @textbox-foreground;
        border: 0;
        margin: 0;
        min-height: 100px;
        
        &:not(.has-results)
        {
            visibility: collapse;
        }

        scrollbox
        {
            overflow-x: hidden !important;
        }

        richlistitem
        {
            padding: 4px;
            color: @textbox-foreground;
            
            &:not(:last-child)
            {
                border-bottom: 1px solid @contrast;
            }
            
            label, description
            {
                font-size: 1rem;
                line-height: 1rem;
                color: @textbox-foreground;
            }

            .icon-wrapper
            {
                min-height: 1.5rem;
                margin: 0 6px;
            }

            .action-wrapper
            {
                margin: 0 22px 0 6px;
            }

            &:not([selected="true"]):not(:hover) .action-wrapper
            {
                visibility: hidden;
            }

            &:not(.small-icon)
            {
                .icon
                {
                    background-repeat: no-repeat;
                    width: 16px;
                    height: 16px;
                    max-height: 16px;
                    background-size: 16px 16px;
                }
            }

            &.small-icon
            {
                .icon
                {
                    background-repeat: no-repeat;
                    width: 14px;
                    height: 14px;
                    max-height: 14px;
                    background-size: 14px 14px;
                }
            }
            
            .number-wrapper
            {
                .number
                {
                    font-size: 1.5rem !important;
                    margin: 0;
                    opacity: 0.4;
                }
            }

            .entry-wrapper
            {
                .title-inner
                {
                    max-width: 375px;
                    overflow: hidden;
                    padding: 1px 0; /* Fixes strange artifacts when letters exceed container heigh */
                }

                spacer
                {
                    min-height: 1rem;
                }

                .title-wrapper description
                {
                    font-size: 1.1rem !important;
                    vertical-align: middle;
                    padding: 0;
                }

                .descriptionPrefix
                {
                    font-style: italic;
                    max-width: 100px;
                    opacity: 0.7;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    padding: 0;
                    margin-left: 6px;
                }
                
                .description
                {
                    opacity: 0.7;
                    padding: 0;
                    margin-top: 2px !important;
                }

                &, .title, .descriptionPrefix, .description
                {
                    margin-top: 0;
                    margin-bottom: 0;
                    padding-top: 0;
                    padding-bottom: 0;
                    line-height: 1rem;
                    height: 1rem;

                    strong
                    {
                        font-size: 1.1rem !important;
                        color: @secondary-special !important;
                        font-weight: bold;
                    }
                }
            }
            
            &[selected="true"]
            {
                color: @selected-foreground;
                background: @selected;
                
                .entry-wrapper
                {
                    label, description
                    {
                        color: @selected-foreground;
                    }
    
                    .title strong, .descriptionPrefix strong, .description strong
                    {
                        color: @selected-foreground !important;
                    }
                }
            }

            button:hover
            {
                background: @contrast-special !important;
            }
        }

    }

    &.subscoped richlistitem
    {
        padding-left: 10px !important;
    }
}

#commando-search-quick
{
    -moz-appearance: none;
    padding: 2px;
    margin: 0;
    width: 200px;
    
    border-radius: 4px;
    cursor: text;
    
    &[placeholder="true"]
    {
        color: rgba(150,150,150,0.8);
    }
    
    &[open]
    {
        transition: all 0.1s;
        border-radius: 0;
        
        width: 480px;
    }
    
}

/* Notification Widget */

label[anonid="notification-widget-text"]
{
    cursor: text;
}